import React, { useState } from 'react';
import { Spin, Checkbox, Button } from 'antd';

import { useUpdateEffect } from '@umijs/hooks';
import { Card } from 'antd';
import { Collapse } from 'antd';
import { getPermissionList } from "../service";
import { useRequestHandle } from '@/utils/utils';

const AgentServerPermission = (props) => {
    const { onFinish, record = {},loading } = props;
    const [agentServerList, setAgentServerList] = useState([]);
    const [agentServerConfigList, setAgentServerConfigList] = useState([]);
    const getTreeTableDataRequest = useRequestHandle(getPermissionList, (data) => {
        setAgentServerList(data.agentServers);
        setAgentServerConfigList(data.agentServerConfigs);
    })
    useUpdateEffect(() => {
        if (record.id) {
            //   setReload(true);
            getTreeTableDataRequest.run({ userId: record.id });
        }
    }, [record])
    const getAgentServerConfigList = () => {
        return agentServerList.map(item => {

            return <Card size='small' key={item.value}>
                <p style={{ fontSize: "12px" }}>{item.label}</p>
                <Checkbox.Group
                    value={agentServerConfigList.filter(x => x.extend === item.value && x.checked).map(x => x.value)}
                    options={agentServerConfigList.filter(x => x.extend === item.value)} onChange={(checkedValue) => {

                        const oldAgentServerConfigList = agentServerConfigList.map(x => {
                            if (x.extend === item.value) {
                                x.checked = checkedValue.includes(x.value);
                            }
                            return x;
                        });
                        setAgentServerConfigList([...oldAgentServerConfigList]);
                    }} />
            </Card>
        });
    }
    const items = [
        {
            key: '1',
            label: '按服务器授权',
            children: <Checkbox.Group
                value={agentServerList.filter(x => x.checked).map(x => x.value)}
                options={agentServerList} onChange={(checkedValue) => {

                    const oldAgentServerList = agentServerList.map(x => {
                        x.checked = checkedValue.includes(x.value);
                        return x;
                    }
                    );
                    setAgentServerList([...oldAgentServerList]);

                    const oldAgentConfigList = agentServerConfigList.map(x => {
                        if (checkedValue.includes(x.extend)) {
                            x.checked = true;
                            x.disabled = true;
                        }
                        else {
                            x.checked = false;
                            x.disabled = false;
                        }
                        return x;
                    });
                    setAgentServerConfigList([...oldAgentConfigList]);
                }} />,
        },
        {
            key: '2',
            label: '按单个服务授权',
            children: getAgentServerConfigList(),
        },

    ];
    return (<Spin tip="正在处理..." spinning={loading}>

        <Card style={{ height: "calc(100vh - 160px)" }} >
            <Button loading={loading} type='primary' onClick={() => {
                const postData = { agentServerIds: [], agentServerConfigIds: [] };
                postData.agentServerIds = agentServerList.filter(x => x.checked).map(x => x.value);
                postData.agentServerConfigIds = agentServerConfigList.filter(x => x.checked && !x.disabled).map(x => x.value);
                onFinish(postData);
            }}>保存</Button>
            <Collapse defaultActiveKey={['1', "2"]} ghost items={items} />
        </Card>
    </Spin>);
};

export default AgentServerPermission;
